<template>
  <div class="submit-order">
    <!-- 顶部导航 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <span>提交订单</span>
      </template>
    </van-nav-bar>

    <!-- 收货地址 -->
    <div class="address">
      <div class="address-title">收货地址</div>
      <div class="address-content" @click="showPopup = true">
        <div class="address-content-top">{{ checkedAddress?.name }},{{ checkedAddress?.tel }}</div>
        <div class="address-content-bottom">
          {{ checkedAddress?.address }}
        </div>
        <div class="address-content-right">
          <van-icon name="arrow" color="#999" size="16" />
        </div>
      </div>

      <!-- 底部弹出框 -->
      <van-popup
        v-model:show="showPopup"
        position="bottom"
        round
        closeable
        :style="{ padding: '30px 10px', height: '80%' }"
        @close="onClose"
      >
        <van-address-list
          v-model:show="showPopup"
          :list="list"
          v-model="chosenAddressId"
          default-tag-text="默认"
          add-button-text="添加收货地址"
          add-address-text="添加新地址"
          @add="onAdd"
          @edit="onEdit"
          @select="onSelect"
        />
      </van-popup>
    </div>

    <!-- 商品清单 -->
    <div class="goods-list">
      <div class="goods-list-title">商品清单</div>
      <div class="goods-list-content">
        <van-card
          v-for="item in checkedList" :key="item.id"
          :num="item.count"
          :price="item.newPrice.toFixed(2)"
          :title="item.name"
          :thumb="item.imgUrl"
          style="background-color: white"
        />
      </div>
      <div class="goods-list-bottom">
        <div>共 <span>{{ checkedCount }}</span> 件商品</div>
        <div>共计:<span>￥ {{ checkedPrice.toFixed(2) }}</span> </div>
      </div>
    </div>


    <!-- 买家留言 -->
     <div class="buyer-message">
      <div class="buyer-message-title">买家留言</div>
      <div class="buyer-message-content">
        <van-field
          v-model="buyerMessage"
          type="textarea"
          rows="1"
          placeholder="50字以内" />
      </div>
    </div>

    <!-- 商品小计 -->
    <van-cell-group inset>
      <van-cell title="商品小计" :value="'￥'+checkedPrice.toFixed(2)" />
      <van-cell title="运费" :value="'￥ 0.00'"  />
    </van-cell-group>

    <!-- 应付款 -->
    <van-submit-bar label="应付款" :price="checkedPrice*100" button-text="立即支付" @submit="onPay" />
  </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant'
import {  ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores';
import { storeToRefs } from 'pinia';

// 状态管理
const cartStore = useCartStore()
const {checkedList,checkedCount,checkedPrice} = storeToRefs(cartStore)

// 路由
const router = useRouter()

const onClickLeft = () => {
  router.back()
}

const showPopup = ref(false)

const list = ref([
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true
  },
  {
    id: '2',
    name: '李四',
    tel: '1310000000',
    address: '浙江省杭州市拱墅区莫干山路 50 号'
  }
])
const chosenAddressId = ref('1')
let checkedAddress = list.value.find((item) => item.id === chosenAddressId.value)
const onAdd = () => showToast('新增地址')
const onEdit = (item, index) => showToast('编辑地址:' + index)

const onSelect = (item, index) => {
  console.log(item, index)
  chosenAddressId.value = item.id
}
//弹出层关闭
const onClose = () => {
  console.log('关闭')
  checkedAddress = list.value.find((item) => item.id === chosenAddressId.value)
}

const buyerMessage = ref('')

// 生成一个唯一的订单号,用户id加日期毫秒数加哈希值
const orderId = 'userid'+'#'+ Math.random().toString(36).slice(-8) + Date.now().toString(36)
console.log(orderId);

//跳转支付页面
const onPay = () => {
  router.push({
    path: '/pay',
    query: {
      orderId: orderId,
      address: checkedAddress?.address,
      name: checkedAddress?.name,
      tel: checkedAddress?.tel,
      price: checkedPrice.value,
      message: buyerMessage.value
    }
  })
}
</script>

<style lang="scss" scoped>
.submit-order {
  background-color: rgb(247, 247, 247);
  width: 100%;
  height: 100vh;
  .address {
    position: relative;
    width: 90%;
    margin: 5%;
    border-radius: 10px;
    padding: 10px 40px 10px 10px;
    background-color: white;

    .address-content-bottom {
      color: gray;
    }

    .address-content-right {
      position: absolute;
      right: 5%;
      top: 50%;
    }
  }
  .goods-list{
    border-radius: 10px;
    width: 90%;
    margin: 5%;
    background-color: white;
    padding: 10px;
    .goods-list-title{
        margin: 10px;
    }
    .goods-list-bottom{
      display: flex;
      justify-content: end;
      margin-top: 20px;
      div{
        margin-right: 15px;
        span{
          color: rgb(218, 24, 33);
        }
      }
    }
  }
  .buyer-message{
    width: 90%;
    margin: 5%;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    display: flex;
    .buyer-message-content{
      width: 70%;
    }
  }
}
</style>
